{% extends "1.html" %}

{# 如果父模板 1.html 支持，这是获取用户ID的最佳方式 #}
{% block body_attr %} data-user-id="{{ user.id }}"{% endblock %}

{% block content %}
    {# 商品详情页内容 #}
    {# 在容器上添加 data-product-id 属性，方便JS获取 #}
    <div class="product-detail-container" data-product-id="{{ product.id }}">
        <h1 class="page-title">{{ product.name }}</h1>

        <div class="product-main-info">
            {# 左侧：商品图片区 #}
            <div class="product-image-section">
                <img src="{{ product.img.url }}" alt="{{ product.name }} - 主图">
            </div>

            {# 右侧：商品基本信息区 #}
            <div class="product-info-section">
                <div class="price-info">
                    {# 如果折后价与原价不同，则显示原价并划掉 #}
                    {% if product.price_d != product.price %}
                        <span class="original-price">¥{{ product.price }}</span>
                    {% endif %}
                    <span class="current-price">¥{{ product.price_d }}</span>
                </div>

                <div class="meta-info">
                    <p><strong>商品规格:</strong> {{ product.sezes }}</p>
                    <p><strong>库存数量:</strong> {{ product.inventory }}</p>
                    <p><strong>已售数量:</strong> {{ product.sold }}</p>
                    <p><strong>收藏人数:</strong> {{ product.likes }}</p>
                </div>

                {# 操作按钮区 #}
                <div class="action-buttons">
                    {# 为按钮添加一个唯一的ID，方便JS选择 #}
                    <button id="add-to-cart-btn" class="btn btn-primary">加入购物车</button>
                    <button class="btn btn-secondary">立即购买</button>
                </div>
            </div>
        </div>

        {# 商品详细介绍区 #}
        <div class="product-description">
            <h2>商品详情</h2>

            {# 商品文字描述 #}
            <div class="description-text">
                {{ product.describe_str | linebreaks }}
            </div>

            <hr>

            {# 商品详情图片 #}
            <div class="description-image">
                <img src="{{ product.details.url }}" alt="{{ product.name }} - 详情图">
            </div>
        </div>

    </div>

    {# ======================================================= #}
    {# ============== JavaScript 脚本区域 ==================== #}
    {# ======================================================= #}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 获取页面上的关键元素和数据
        const addToCartBtn = document.getElementById('add-to-cart-btn');
        const productContainer = document.querySelector('.product-detail-container');

        // 从 data 属性中获取商品ID
        const productId = productContainer.dataset.productId;

        // 从 <body> 标签的 data 属性中获取用户ID
        // 如果用户未登录，Django模板通常会将 user.id 渲染为空或 None
        const userId = document.body.dataset.userId;

        // 2. 为“加入购物车”按钮绑定点击事件
        if (addToCartBtn) {
            addToCartBtn.addEventListener('click', function() {
                // 3. 判断用户是否登录
                // 如果 userId 不存在或为空字符串，则认为未登录
                if (!userId) {
                    // 未登录，跳转到登录页面
                    window.location.href = 'http://127.0.0.1:8000/shopper/login/';
                    return; // 终止后续代码执行
                }

                // 4. 已登录，发起异步请求添加商品到购物车
                // 禁用按钮，防止重复点击
                addToCartBtn.disabled = true;
                addToCartBtn.textContent = '添加中...';

                fetch('http://127.0.0.1:8000/shopper/api/caradd/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json', // 告诉服务器我们发送的是JSON数据
                        'X-User-ID': userId // 按照要求，在请求头中带上用户ID
                    },
                    // 在请求体中发送商品ID，这是更常见的做法
                    body: JSON.stringify({
                        product_id: productId
                    })
                })
                .then(response => {
                    // 检查响应是否成功 (HTTP状态码 200-299)
                    if (!response.ok) {
                        // 如果不成功，尝试解析错误信息
                        return response.json().then(err => { throw err; });
                    }
                    return response.json(); // 解析成功的JSON响应
                })
                .then(data => {
                    // 请求成功处理
                    console.log('添加成功:', data);
                    alert('商品已成功加入购物车！');
                    // 可以在这里更新页面上的购物车数量等UI
                })
                .catch(error => {
                    // 请求失败处理
                    console.error('添加购物车失败:', error);
                    // 显示更友好的错误信息
                    const errorMessage = error.message || error.detail || '网络错误，请稍后重试。';
                    alert(`添加失败: ${errorMessage}`);
                })
                .finally(() => {
                    // 无论成功或失败，最后都恢复按钮状态
                    addToCartBtn.disabled = false;
                    addToCartBtn.textContent = '加入购物车';
                });
            });
        }
    });
    </script>
{% endblock content %}

